{% extends "layout.html" %}
{% load staticfiles %}
{% block css %}
    <link rel="stylesheet" href="{% static 'plugin/morris/morris.css' %}">
    <style>
        .text-muted {
            text-align: center;
            font-size: 17px;
            padding: 19px 0 19px 0
        }

        .text-muted span {
            color: white;
        }
    </style>
{% endblock %}
{% block body %}
<body>
{% endblock %}
{% block webinfo %}
    <div class="container">
        <div class="row">
            <div class="col-lg-2 col-md-6">
                <div class="card-box widget-user">
                    <div class="text-center">
                        <h2 class="text-custom" data-plugin="counterup">{{ total_cms }}</h2>
                        <h5>指纹总数</h5>
                    </div>
                </div>
            </div>

            <div class="col-lg-2 col-md-6">
                <div class="card-box widget-user">
                    <div class="text-center">
                        <h2 class="text-pink" data-plugin="counterup">{{ total_zw }}</h2>
                        <h5>CMS种类</h5>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div class="card-box">
                    <div class="widget-box-2">
                        <div class="widget-detail-2">
                            <span class="badge badge-purple pull-left m-t-20">负载：33% <i
                                    class="zmdi zmdi-trending-up"></i> </span>
                            <p class="text-muted">
                                    <span>节点利用率<i class="zmdi zmdi-favorite"
                                                 style="margin-left:10px;margin-right: 50px" title="节点利用率"></i></span>
                            </p>
                        </div>
                        <div class="progress progress-bar-purple-alt progress-sm m-b-0">
                            <div class="progress-bar progress-bar-purple" role="progressbar"
                                 aria-valuenow="39" aria-valuemin="0" aria-valuemax="100"
                                 style="width: {{ taskpercent }}%;">
                                <span class="sr-only">12% Complete</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-2 col-md-6">
                <div class="card-box widget-user">
                    <div class="text-center">
                        <h2 class="text-warning" data-plugin="counterup">{{ total_scan }}</h2>
                        <h5>扫描总数</h5>
                    </div>
                </div>
            </div>

            <div class="col-lg-2 col-md-6">
                <div class="card-box widget-user">
                    <div class="text-center">
                        <h2 class="text-info" data-plugin="counterup">{{ total_finish }}</h2>
                        <h5>已完成</h5>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="card-box card-tabs">
                    <ul class="nav nav-pills pull-right">
                        <li class="active">
                            <a href="#cardpills-1" data-toggle="tab" aria-expanded="true" class="card-tab">全部</a>
                        </li>
                    </ul>
                    <h4 class="header-title m-b-30">CMS Top10 种类统计</h4>

                    <div class="tab-content">
                        <div id="cardpills-1" class="tab-pane fade in active">
                            <div class="row">
                                <div class="col-md-12">
                                    <div id="morris-bar-stacked" style="height: 475px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div><!-- end col -->
        </div>
    </div>
{% endblock %}

{% block js %}
    <script src="{% static 'plugin/jquery.waypoints.min.js' %}"></script>
    <script src="{% static 'js/jquery.counterup.min.js' %}"></script>
    <script src="{% static 'plugin/morris/morris.js' %}"></script>
    <script src="{% static 'plugin/raphael/raphael-min.js' %}"></script>
    <script src="{% static 'plugin/jquery-knob/jquery.knob.js' %}"></script>

    <script>

        $(document).ready(
          new Morris.Bar({
              element:$("#morris-bar-stacked"),
              data:{{ stackBar | safe }},
              xkey:'_id',
              ykeys:['count'],
              labels:['识别数量']
          })

        );

        $('.card-tab').click(function () {
            setTimeout(function () {
                $(window).resize()
            }, 300);
        })
    </script>

{% endblock %}
